import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index/Index.vue'

Vue.use(Router);

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {path: '/', meta: {title: '首页'}, redirect: '/index'},
        {
            path: '/index',
            name: 'Index',
            component: Index,
            meta: {
                title: '首页',
                keepAlive: false
            }
        },
        {
            path: '/details/:id',
            name: 'NewDetails',
            component: () => import('../components/NewDetails'),
            meta: {
                title: '详情',
                keepAlive: false
            }
        },
        {
            path: '/about',
            name: 'About',
            // which is lazy-loaded when the route is visited.(按需加载)
            component: () => import('../views/about/About')
        },
        {
            path: '/search',
            name: 'Search',
            // which is lazy-loaded when the route is visited.(按需加载)
            component: () => import('../views/news/Search'),
            meta: {
                title: '搜索结果'
            }
        },
        {
            path: '/add',
            name: 'Add',
            component: () => import('../views/article/Add')
            ,
            meta: {
                title: '发表文章',
                keepAlive: false,
                requireAuth: true,
            }
        },
        {
            path: '/edit/:id',
            name: 'Edit',
            component: () => import('../views/article/Edit')
            ,
            meta: {
                title: '修改文章',
                keepAlive: false,
                requireAuth: true,
            }
        },
        {
            path: '/news',
            name: 'News',
            component: () => import('../views/news/News')
            ,
            meta: {
                title: '今日热门',
                keepAlive: false,
                requireAuth: false,
            }
        },
        {
            path: '/login',
            name: 'Login',
            component: () => import('../views/login/Login'),
            meta: {
                title: '登录',
                keepAlive: false
            }
        },
        {
            path: '/home',
            name: 'PersonalPage',
            component: () => import('../views/home/PersonalPage'),
            meta: {
                title: '个人主页',
                keepAlive: true
            }
        }

    ],
    //  避免keep-alive造成进入不同新页面时
    //  初始位置不在顶部的bug
    scrollBehavior(to, from, savedPosition) {
        return {x: 0, y: 0}
    }
});
//  动态渲染页面title
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
    let _this = this
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next();
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (localStorage.getItem("userToken")) {  // 通过localStorge 获取当前的token是否存在
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
});


export default router;